﻿<!doctype HTML>
<html>
    <head>
        <title>App settings flyout</title>
        <!--script src="/js/4-SettingsFlyout-Settings.js"></!--script>
        <link rel="stylesheet" href="../css/default.css" /-->
        <script type="text/javascript">
            console.log("wtf");
        </script>
    </head>
    <body>
        <!-- BEGINSETTINGSFLYOUT -->
        <div id="preferencesSettingsFlyout" aria-label="App Preferences Flyout"
             data-win-control="WinJS.UI.SettingsFlyout" data-win-options="{settingsCommandId:'Preferences'}">
            <!-- Use either 'win-ui-light' or 'win-ui-dark' depending on the contrast between the header title and background color -->
            <div class="win-ui-dark win-header">
                <button type="button" onclick="WinJS.UI.SettingsFlyout.show()" class="win-backbutton"></button>
                <div class="win-label">Defaults</div>
                <!--img src="../images/smallTile-sdk.png" style="position: absolute; right: 40px;"/-->
            </div>
            <div class="win-content">
                <div class="win-settings-section">
                    <h3>Toggle switch</h3>
                    <p>Use toggle switches to let users set Boolean values.</p>
                    <div id="Toggle1" data-win-control="WinJS.UI.ToggleSwitch" data-win-options="{title:'Download updates automatically',checked:true}">
                    </div>
                    <div id="Toggle2" data-win-control="WinJS.UI.ToggleSwitch" data-win-options="{title:'Install updates automatically'}">
                    </div>
                    <div id="Toggle3-wrap">
                        <input type="checkbox" id="Toggle3" />
                        <label for="Toggle3">simple checkbox</label>
                    </div>
                </div>
                <div class="win-settings-section">
                    <h3>Push button</h3>
                    <p>With a push button, users initiate an immediate action.</p>
                    <label>Button label</label>
                    <button type="button" onclick="WinJS.log && WinJS.log('Clear history button pressed', 'samples', 'status')">Clear</button>
                </div>
                <div class="win-settings-section">
                    <h3>Select control</h3>
                    <p>Use the select control to allow users to select one item from a set of text-only items.</p>
                    <label>State</label>
                    <select aria-label="State select control">
                        <option value="AK">Alaska</option>
                        <option value="CA">California</option>
                        <option value="CO">Colorado</option>
                        <option value="HI">Hawaii</option>
                        <option value="ID">Idaho</option>
                        <option value="KS">Kansas</option>
                        <option value="MT">Montana</option>
                        <option value="NE">Nebraska</option>
                        <option value="NV">Nevada</option>
                        <option value="NM">New Mexico</option>
                        <option value="ND">North Dakota</option>
                        <option value="OR">Oregon</option>
                        <option value="SD">South Dakota</option>
                        <option value="TX">Texas</option>
                        <option value="UT">Utah</option>
                        <option value="WA" selected>Washington</option>
                        <option value="WY">Wyoming</option>
                    </select>
                </div>
                <div class="win-settings-section">
                    <h3>Hyperlink</h3>
                    <p>Use a hyperlink when the associated action will take the user out of this flyout.</p>
                    <a href="http://go.microsoft.com/fwlink/?LinkID=190175" target="fix_link_too">View privacy statement</a>
                </div>
                <div class="win-settings-section">
                    <h3>Text input box</h3>
                    <p>Use a text input box to allow users to enter text. Set the type of the text input box according to the type of text you’re capturing from the user (e.g. email or password).</p>
                    <label>Email account</label>
                    <input type="text" aria-label="Enter email account" />
                    <button type="button" onclick="WinJS.log && WinJS.log('Add email account button pressed', 'samples', 'status')">Add</button>
                </div>
                <div class="win-settings-section">
                    <h3>Radio button group</h3>
                    <p>Lets users choose one item from a small set of mutually exclusive, related options.</p>
                    <label>Video quality</label>
                    <label><input type="radio" name="video" value="High" checked />High</label>
                    <label><input type="radio" name="video" value="Medium" />Medium</label>
                    <label><input type="radio" name="video" value="Low" />Low</label>
                </div>
            </div>
        </div>
        <!-- ENDSETTINGSFLYOUT -->
    </body>
</html>
